<template>
  <div>
    <el-dialog v-model="dialogVisible" title="项目信息" width="60%" :before-close="handleClose">
      <div>
        <table>
          <tr>
            <th class="table-header" colspan="4">项目基础信息</th>
          </tr>
          <tr>
            <td class="table-title">项目编号</td>
            <td class="table-word-code">GWZB-JZ-2023-007</td>
            <td class="table-title">项目年度</td>
            <td class="table-word">2023</td>
          </tr>
          <tr>
            <td class="table-title">项目名称</td>
            <td class="table-word-code">西部项目原党委数据、执行董事长经济责任审计</td>
            <td class="table-title">计划状态</td>
            <td class="table-word">新建</td>
          </tr>
          <tr>
            <td class="table-title">项目类型</td>
            <td class="table-word-code">经济责任审计</td>
            <td class="table-title">项目状态</td>
            <td class="table-word">报告</td>
          </tr>
          <tr>
            <td class="table-title">立项单位</td>
            <td class="table-word-code">集团总部</td>
            <td class="table-title">实施单位</td>
            <td class="table-word">审计中心</td>
          </tr>
          <tr>
            <td class="table-title">被审计对象</td>
            <td class="table-word" colspan="3">至臻云北京子公司</td>
          </tr>
          <tr>
            <td class="table-title">计划开始时间</td>
            <td class="table-word-code">2023-07-23</td>
            <td class="table-title">计划结束时间</td>
            <td class="table-word">2023-07-20</td>
          </tr>
          <tr>
            <td class="table-title">项目组长</td>
            <td class="table-word-code">王帅</td>
            <td class="table-title">项目主审</td>
            <td class="table-word">张三</td>
          </tr>
        </table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
const dialogVisible = ref(false);
const handleClose = () => {
  ElMessageBox.confirm('你确定要关闭弹窗吗')
    .then(() => {
      dialogVisible.value = false;
    })
    .catch(() => {
      // catch error
    });
};
const initOk = () => {
  dialogVisible.value = true;
};
// defineExpose 将方法暴露出来才可以被父组件调用
defineExpose({
  initOk,
});
</script>

<style lang="scss" scoped>
table,
th,
td {
  border: 1px solid #d9dce4;
}
table {
  width: 100%;
}
th,
td {
  height: 48px;
}
.table-header {
  text-align: left;
  padding-left: 10px;
  background-color: #f6f7fb;
}
.table-title {
  padding-left: 10px;
  font-weight: 700;
  width: 204px;
  background-color: #f6f7fb;
}
.table-word {
  padding-left: 10px;
}
.table-word-code {
  padding-left: 10px;
  width: 453px;
}
::v-deep .el-dialog__header {
  background: #f6f7fb;
  margin-right: 0 !important;
  font-weight: 700;
}
</style>
